<template>
  <!--产品代理-->
  <div class="content">
    <div class="list">
      <ul>
        <li>邀请下级代理使用该码进行注册</li>
        <li>
          <div id="qrCode" style="width: 150px;height: 150px"></div>
        </li>
        <!-- <li>{{agentCodeStr}}</li>-->
      </ul>
    </div>
    <wv-button type="default" :plain="true" class="back" @click="goBack()">返回</wv-button>
    <ul class="tip">
     <!-- <li>详情说明</li>
      <li>该码适用核验范围：会员使用贵宾厅、贵宾通道、机场指定免费餐饮、9DVR等会员服务</li>-->
    </ul>
  </div>
</template>

<script type="text/ecmascript-6">
  import {agentInfo} from '../../utils/http'
  import {Toast} from 'we-vue'
  import QRCode from 'qrcodejs2';

  export default {
    name: 'invite',
    props: {},
    data() {
      return {
        agentCode: '',
        agentPriceId: ''
      };
    },
    methods: {
      goBack() {
        this.$router.go(-1);
      },
      getAgentInfo(params) {
        agentInfo(params).then(res => {
          console.log(res)
          if (res.code == 100) {
            let agentCode = res.object.agent.agentCode;
            let registerUrl = " http://" + window.location.host + "#/register?agentCode=" + agentCode + "&agentPriceId=" + this.agentPriceId;
            this.generateQrCode(registerUrl);
            this.agentCode = agentCode;
          } else {
            Toast.text(res.info)
          }
        })
      },
      generateQrCode(text) {
        new QRCode('qrCode', {
          width: 150,
          height: 150,        // 高度
          text: text,   // 二维码内容
          render: 'canvas',   // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
          background: '#f0f',   // 背景色
          foreground: '#ff0'    // 前景色
        })
      }
    },
    mounted() {
      let params = {queryAgentCategory: false};
      this.getAgentInfo(params);
    },
    created() {
      let query = this.$route.query;
      this.agentPriceId = query.agentPriceId;
    },
    computed: {
      agentCodeStr: function () {
        return this.$myUtils.replaceStr(this.agentCode)
      }
    },
    components: {}
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .content {
    height: 100vh;
    padding-top: 50px;
    background-image: linear-gradient(to left, #4c92ed, #61beec);
  }

  .list {
    width: 80%;
    margin: auto;
    background: url("../../assets/saomabg.png") no-repeat;
    background-size: 100% 100%;

    ul {
      color: #111;
      font-size: 13px;
      padding: 30px;
      text-align: center;

      li:first-child {
        padding-bottom: 35px;
        border-bottom: 1px solid #ddd;
        margin-bottom: 20px;
      }

      li:nth-child(2) {
        div {
          margin: 0 auto;
          border: 1px solid #f6fffc;

        }
      }

      li:last-child {
        margin-top: 5px;
        font-size: 18px;
      }

    }

  }

  button.weui-btn_plain-default {
    background-color: #fff;
    border: none;
    width: 75%;
    color: #2d93f0;
  }

  .tip {
    text-align: left;
    padding: 40px 20px;

    li:first-child {
      font-size: 17px;
      color: #0d5183;
    }

    li:last-child {
      font-size: 15px;
      line-height: 25px;
      color: #fff;
    }
  }
</style>
